<style lang="less">
  @import "userManage";
</style>

<template >
<div class="user">
  <div class="user-search">
    <user-search @data="getData"></user-search>
  </div>
  <div class="user-table">
    <Table border ref="selection" :columns="columns" :data="data"></Table>
    <Modal v-model="modal" title="重置用户密码" @on-ok="changePassword" @on-cancel="cancel" width="260px">
      <p>
        <Input type="password" v-model="password" placeholder="请输入需要重置的密码">
          <span slot="prepend">
            <Icon type="ios-lock-outline"/>
          </span>
        </Input>
      </p>
    </Modal>
  </div>
</div>
</template>

<script>
  import UserSearch from '../../../components/user-search/user-search'
  import {url} from '../../../../config/url'
    export default {
        name: "userManage",
      components:{
          UserSearch
      },
      data(){
        return {
          indeterminate: true,
          checkAll: false,
          modal:false,
          password:'',
          id:0,
          columns: [
            {
              type: 'selection',
              width: 60,
              align: 'center'
            },
            {
              title:'ID',
              key:'id'
            },
            {
              title: '用户名',
              key: 'username',
            },
            {
              title: '姓名',
              key: 'name'
            },
            {
              title:'电话号码',
              key:'phone',
            },
            {
              title:'电子邮件',
              key:'email',
            },
            {
              title: '操作',
              key: 'handle',
              width:140,
              render: (h, params) => {
                return h('div', [
                  //重置用户密码
                  h('Button', {
                    props: {
                      icon:'md-refresh'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.reset(params.index)
                      }
                    }
                  }),
                  //删除用户
                  h('Button', {
                    props: {
                      icon:'ios-trash'
                    },
                    on: {
                      click: () => {
                        this.remove(params.index)
                      }
                    }
                  })
                ]);
              }
            }
          ],
          data: [
          ]
        }
      },
      methods:{
        cancel() {
          this.modal=false;
          this.password='';
        },
        changePassword(){
          if(this.password.length>5){
            this.$axios.put(url+'/user',{
              'id':this.id,
              'password':this.password
            },{
              headers:{
                'Content-Type':'application/json'
              }
            }).then(res=>{
              if(res.data.error_code==0){
                alert("重置用户密码成功");
                this.password='';
              }else {
                alert("重置失败");
                this.password='';
              }
            })
          }else{
            alert("密码长度必须大于5")
          }
        },
        handleSelectAll (status) {
          this.$refs.selection.selectAll(status);
        },
        //重置用户密码
        reset (index) {
          this.id=this.data[index].id;
          this.modal=true
        },
        remove (index) {
          let id=JSON.stringify([this.data[index].id]);
          this.$axios.delete(url+'/user',{
            params:{
              'data':id
            }
          }).then(res=>{
            if(res.data.error_code==0){
              this.data.splice(index, 1);
              alert("删除用户成功")
            }
            else{
              alert("删除用户失败")
            }
          })
        },
        //获取查询用户的结果
        getData(data){
          this.data=data;
        }
      }
    }
</script>

<style scoped>

</style>
